<template>
	<view class="page">
		<view class="searchBox" style="background-color: #4089f0;flex-wrap: wrap;">
			<view class="inputBox" style="color: #fff;">
				<view class="inputRow" style="border: 0;">
					<view class="label" style="color: #fff;">
						{{language.score.label1}}:
					</view>
					<view  class="val"  style="justify-content: flex-end;">
						<view class="text" style="font-weight: 600;font-size: 36rpx;">
							{{roomDetail.monthScore | emptyStr }}
						</view>
						{{language.score.label2}}
					</view>
				</view>
				
			</view>
			<view class="infoBox">
				<!-- <view class="img">
					<u--image :showLoading="true" src="" shape="circle" width="90rpx" height="90rpx"></u--image>
				</view> -->
				<view class="info">
					<view class="name">
						{{roomDetail.roomName  | emptyStr}}
					</view>
					<view class="num">
						<u-icon name="account-fill" color="#cdcdcd" size="24"></u-icon>
						{{roomDetail.memberCount | emptyStr}} {{language.score.label3}}
						<u-icon v-if="roomDetail.roomSex=='M'" name="man" color="#4089f0" size="24" style="margin-left: 10rpx;"></u-icon>
						<u-icon v-if="roomDetail.roomSex=='F'" name="woman" color="#ff007f" size="24" style="margin-left: 10rpx;"></u-icon>
					</view>
					
				</view>
				<view class="btn" @click="goPage('/pages/componentsC/dorm/scoreRecord',{id:roomId})">
					{{language.score.label4}}
				</view>
			</view>
		</view>
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow"  @click="selectDepartShow=true">
					<view class="label">
						{{language.score.label5}}:
					</view>
					<view :class="selectDepart.departName? 'val':'emty'">
							{{selectDepart.departName ? selectDepart.departName : language.score.tip1}}
					</view>
				</view>
				<view class="inputRow"  @click="startDateShow=true">
					<view class="label">
						{{language.score.label6}}:
					</view>
					<view class='val'>
							{{scoreDate}}
					</view>
				</view>
				<view class="inputRow" >
					<view class="label">
						{{language.score.label7}}:
					</view>
					<view :class="params.startDate ? 'val' : 'val'" >
						{{roomDetail.currentScore | emptyStr}} 
						<view >
							（{{language.score.label12}}{{roomDetail.totalScore | emptyStr}}）
						</view>
					</view>
				</view>
				<view class="inputRow"  @click="handelSelectShow(1)">
					<view class="label">
						{{language.score.label8}}:
					</view>
					<view class="val" >
						{{roomDetail.currentHealthScoreStander | emptyStr}}
						<view class="errDesc" style="" >
							<text v-if="selectScoreItem.length">
								已选择({{selectScoreItem[0].itemName}}) {{selectScoreItem.length > 1 ? '等':''}}{{selectScoreItem.length}}项
							</text>
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#909399" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="inputRow">
					<view class="label">
					 {{language.score.label9}}:
					</view>
					<view class=" val" >
						<u-input type="number" @change="handleTotalScore" v-model="roomDetail.noonScoreStander" placeholder="请输入午休纪律得分"></u-input>
					</view>
				</view>
				<view class="inputRow" >
					<view class="label">
						{{language.score.label10}}:
					</view>
					<view class="val" >
						<u-input type="number" @change="handleTotalScore" v-model="roomDetail.nightScoreStander" placeholder="请输入晚寝纪律得分"></u-input>
					</view>
				</view>
			</view>
			
			
		</view>
		<view class="submitBtn"  @click="handleSubmit">
			{{language.score.btn}}
		</view>
		
		<u-modal :show="selectItemShow"  :title="selectItemTitle" showConfirmButton showCancelButton @cancel="selectItemShow=false" @confirm="showConfirm" >
			<view class="slot-content">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view>
						<u-checkbox-group
						   v-model="itemScoreValue"
						   placement="" @change="itemScoreChange"
						 >
						   <u-checkbox
						     :customStyle="{marginRight: '8px',marginBottom:'8px',width:'',}"
						     v-for="(item, index) in itemScoreList"
						     :key="index"
						     :label="item.label"
						     :name="item.index"
						   >
						   </u-checkbox>
						 </u-checkbox-group>
					</view>
				</scroll-view>
					
				
			</view>
		</u-modal>
		
	
		<u-datetime-picker
		    :show="startDateShow" ref="datetimePicker" v-model="startDate" 
		    mode="date"  @cancel="startDateShow=false" @confirm="startDateConfirm" :maxDate="maxDate"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endDateShow" ref="datetimePicker" v-model="endDate" 
			mode="dateTime"  @cancel="endDateShow=false" @confirm="endDateConfirm"
	       ></u-datetime-picker>
		<u-picker :show="selectDepartShow" ref="uPicker" :columns="deptList" @cancel="selectDepartShow=false" keyName="departName"
		  @confirm="depatConfirm" ></u-picker>
	</view>
</template>

<script>
	import {toScoreFormApi,dormScoreAddApi,dormHealthItemListApi,roomDeptListApi} from '@/common/api/commonApi/dormApi.js'
	import scollerXTabel from '@/components/scollerXTabel.vue'
	export default {
		data() {
			return {
				list:[],
				scoreDate: '',
				startDate: Number(new Date()),
				endDate: Number(new Date()),
				startDateShow : false,
				endDateShow : false,
				total : 0,
				isTeacher: 1,
				itemScoreValue: '',
				itemScoreList: [
				],
				selectItemType:1,//卫生
				selectItemShow:false,
				selectItemTitle: '内务卫生评分项目',
				roomDetail: {},
				roomId: '',
				selectScoreItem:[],
				deptList:[[]],
				selectDepartShow: false,
				selectDepart:{},
				maxDate: Number(new Date())
			}
		},
		components:{
		},
		methods: {
			depatConfirm(e){
				console.log(e);
				this.selectDepart = e.value[0]
				this.roomDetail.deptId = this.selectDepart.id
				this.selectDepartShow = false
			},
			showConfirm(){
				this.selectItemShow = false
			},
			handleTotalScore(){
				let data = this.roomDetail
				this.roomDetail.currentScore = Number(data.currentHealthScoreStander)+Number(data.nightScoreStander)+Number(data.noonScoreStander)
			},
			itemScoreChange(e){
				console.log(e);
				this.selectScoreItem = []
				let score = 0
				e.forEach(item=>{
					this.selectScoreItem.push(this.itemScoreList[item])
				})
				this.selectScoreItem.forEach(item=>{
					score+=item.itemScore
				})
				// this.roomDetail.currentScore = this.roomDetail.totalScore - score
				this.roomDetail.currentHealthScoreStander = this.roomDetail.healthScoreStander - score
				this.handleTotalScore()
			},
			handelSelectShow(index){
				this.selectItemShow = true;
				this.selectItemType= index
				if(index==1){
					this.selectItemTitle = '内务卫生评分项目'
				}else if(index==2){
					this.selectItemTitle = '午休纪律评分项目'
				}else if(index==3){
					this.selectItemTitle = '晚寝纪律评分项目'
				}
			},
			handleSubmit(){
				if(!this.roomDetail.deptId) return this.setMessage('请先选择班级')
				let data = this.roomDetail
				data.scoreDate = this.scoreDate
				data.dormScoreHealthList = []
				this.selectScoreItem.forEach(item=>{
					data.dormScoreHealthList.push({
						itemId : item.id,
						itemRemark : item.itemDesc
					})
				})
				// data.dormScoreHealthList = this.selectScoreItem
				
				data.healthScore = data.currentHealthScoreStander
				data.nightScore = data.nightScoreStander
				data.noonScore = data.noonScoreStander
				
				delete data.deptList
				delete data.items
				console.log(data);
				dormScoreAddApi(data).then(res=>{
						this.setMessage('操作成功')
						this.goBack()
				})
			},
			handleDetail(item){
				this.goPage('/pages/componentsC/safe/accessRecordDetail',{id:1})
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.currPage ++
				this.getDetail()
			},
			startDateConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.scoreDate = date
				// console.log(this.params.startDate);
				this.startDateShow = false
			},
			endDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.endDate = date
				this.endDateShow = false
			},
			getHealthItem(){
				dormHealthItemListApi({
					pageNo:1,
					pageSize: 1000,
					status: 1
				}).then(res=>{
					this.itemScoreList =  res.result.records
					this.itemScoreList.forEach((item,index)=>{
						item.label = item.itemName+' '+item.itemScore
						item.index = index
					})
				})
			},
			getDetail(){
				let params = {}
				params.roomId = this.roomId
				return toScoreFormApi(params).then(res=>{
					this.roomDetail	= res.result
					// this.deptList.push(this.roomDetail.deptList)
					// console.log(this.deptList);
					try{
						// this.itemScoreList = this.roomDetail.items
						// this.itemScoreList.forEach((item,index)=>{
						// 	item.label = item.itemName+' '+item.itemScore
						// 	item.index = index
						// })
						this.roomDetail.currentHealthScoreStander = this.roomDetail.healthScoreStander
						this.handleTotalScore()
						// this.roomDetail.totalScore = res.result.healthScoreStander+res.result.nightScoreStander+res.result.noonScoreStander
						this.roomDetail.totalScore = this.roomDetail.currentScore
					}catch(e){
						//TODO handle the exception
					}
				})
			},
			getClass(){
				roomDeptListApi({
					id:this.roomId
				}).then(res=>{
					this.deptList = []
					this.deptList.push(res.result) 
					if(res.result.length==1){
						this.selectDepart = res.result[0]
						this.roomDetail.deptId = this.selectDepart.id
						console.log(this.roomDetail);
					}
				})
			}
			
		},
		async onLoad() {
			this.setPageTitle(this.language.score.title)
			this.selectItemTitle = this.language.score.label11
			this.scoreDate = this.dateformat(new Date()).split(' ')[0]
			if(this.$Route.query.item){
				this.roomId = this.$Route.query.item.id
			}
			await this.getDetail()
			this.getHealthItem()
			this.getClass()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f1f1f1;
	// height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding:  20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		// box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			// flex: 1;
			width: 100%;
			padding-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.inputRow{
				width: 100%;
				border-bottom: 1px solid #f1f1f1;
				height: 120rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				display: flex;
				flex: 1;
				align-items: center;
			}
			.text{
				margin: 0 20rpx;
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	
	.submitBtn{
		margin: 40rpx;
		// width: 110rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	
	.infoBox{
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 150rpx;
		padding: 20rpx;
		align-items: center;
		border-radius: 8rpx;
		.img{
			width: 100rpx;
			margin-right: 20rpx;
		}
		.info{
			flex: 1;
			align-items: center;
			.name{
				font-size: 34rpx;
				font-weight: 600;
				color: #191919;
			}
			.num{
				margin-top: 20rpx;
				display:flex;
				align-items: center;
			}
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 160rpx;
			height: 60rpx;
			color: #1890ff;
			border: 2rpx solid #1890ff;
			font-size: 28rpx;
			border-radius: 30rpx;
		}
	}
	.errDesc{
		color: #f56c6c;
		font-size: 26rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		flex: 1;
	}
}
.slot-content{
	width: 600rpx;
	padding: 20rpx;
	height: 600rpx;
}
</style>
